<template>
  <div class="test-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>测试列表</span>
        </div>
      </template>
      <!-- 搜索栏 -->
      <div class="search-container">
        <el-input
          v-model="query.title"
          placeholder="请输入测试标题"
          class="search-input"
          prefix-icon="Search"
          clearable
        />
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>

      <!-- 测试列表 -->
      <div v-if="testList.length > 0" class="test-grid">
        <el-card 
          v-for="test in testList" 
          :key="test.id" 
          class="test-card"
          :body-style="{ padding: '0px' }"
          shadow="hover"
        >
          <div class="test-header">
            <span class="test-category">{{ test.category }}</span>
            <span class="test-duration">{{ test.estimatedTime }}分钟</span>
          </div>
          <div class="test-content">
            <h3 class="test-name">{{ test.title }}</h3>
            <p class="test-desc">{{ test.description }}</p>
            <div class="test-meta">
              <el-tag size="small" :type="getDifficultyType(test.difficulty)">
                难度：{{ test.difficulty }}
              </el-tag>
            </div>
          </div>
          <div class="test-footer">
            <el-button type="primary" @click="startTest(test.id)">开始测试</el-button>
          </div>
        </el-card>
      </div>
      <el-empty
        v-else
        description="暂未发布任何测试"
        :image-size="200"
      >
        <template #description>
          <p>暂未发布任何测试，请耐心等待</p>
        </template>
      </el-empty>
    </el-card>
  </div>
</template>

<script>
import { listTests, startTest } from '@/api/psychological-test'

export default {
  name: 'TestList',
  data() {
    return {
      query: {
        pageNum: 1,
        pageSize: 12,
        title: '',
        status: 1
      },
      testList: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      try {
        const res = await listTests(this.query)
        this.testList = res.data.records
      } catch (error) {
        console.error('获取测试列表失败:', error)
      }
    },
    async startTest(testId) {
      try {
        const res = await startTest(testId)
        if (res.code === 200) {
          // 使用query参数进行路由跳转
          this.$router.push({
            path: '/test/test-page',
            query: { recordId: res.data }
          }).catch(err => {
            console.error('路由跳转失败:', err)
            this.$message.error('页面跳转失败，请检查路由配置')
          })
        } else {
          this.$message.error(res.msg || '开始测试失败')
        }
      } catch (error) {
        console.error('开始测试失败:', error)
        this.$message.error('开始测试失败，请重试')
      }
    },
    handleSearch() {
      this.query.pageNum = 1
      this.getList()
    },
    handleReset() {
      this.query.title = ''
      this.getList()
    },
    getDifficultyType(difficulty) {
      const types = {
        1: 'success',
        2: 'warning',
        3: 'danger'
      }
      return types[difficulty] || 'info'
    }
  }
}
</script>

<style scoped>
.test-container {
  height: calc(100vh - 84px);
  padding: 10px;
  background-color: #f0f2f5;
}

.search-container {
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
}

.search-input {
  width: 300px;
}

.test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.test-card {
  border-radius: 8px;
  transition: all 0.3s;
}

.test-card:hover {
  transform: translateY(-5px);
}

.test-header {
  background-color: #f5f7fa;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ebeef5;
}

.test-category {
  color: #409eff;
  font-weight: 500;
}

.test-duration {
  color: #909399;
  font-size: 14px;
}

.test-content {
  padding: 16px;
  min-height: 160px;
}

.test-name {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: #303133;
}

.test-desc {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

.test-meta {
  margin-bottom: 12px;
}

.test-footer {
  padding: 12px 16px;
  border-top: 1px solid #ebeef5;
  text-align: right;
  background-color: #fff;
}

.box-card {
  height: 100%;
  margin: -10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 